// 在ant design Upload 中，OnChange - beforeUpload 携带的参数是不一样的。
// 设置beforeUpload的时候，OnChange没有status参数；在利用他们携带文件发起POST请求的时候，
// file -- info.file.originFileObj
import React, { useState } from 'react';
import { Upload, message, Button, Table, Modal, Progress, Image, Carousel, Card, Col, Row } from 'antd';
import XLSX from 'xlsx';
import { UploadOutlined, CheckCircleOutlined, CloseCircleOutlined, DownloadOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { UploadExcel, DownloadExcel } from '@/api/home';


const contentStyle = {
  // width:'150px',
  height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
};
function ExcelUploader() {
  const [loading, setLoading] = useState(false)
  const [tabledata, setTabledata] = useState(null)
  const [exceldata, setExceldata] = useState(null)
  const [columns, setcolumns] = useState([])
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [filename, setFilename] = useState('')
  const [uploadresult, setUploadresult] = useState(true)
  // 假设你有一个状态来追踪是否正在上传  
  const [uploading, setUploading] = useState(false);
  // 假设你还有一个状态来追踪上传的百分比  
  const [uploadPercent, setUploadPercent] = useState(0)
  const [fileList, setFileList] = useState()
  // 数据转换函数  
  function convertToJsonObjects(data) {
    // 假设第一个数组是列标题  
    const headers = data.shift(); // 移除并返回第一个元素（列标题）  
    return data.map(row => {
      // 创建一个对象，并使用headers作为键，row数组的值作为对应的值  
      const obj = {};
      headers.forEach((header, index) => {
        obj[header] = row[index];
      });
      return obj;
    });
  }
  // 触发BeForeUpload上传预览
  const handleBeforeUpload = (file) => {
    console.log("file", file)
    setLoading(true);
    setExceldata(file)
    setFilename(file.name)
    const reader = new FileReader();
    reader.onload = (e) => {
      const data = new Uint8Array(e.target.result);
      // console.log(e.target.result)
      const workbook = XLSX.read(data, { type: 'array' });
      // 获取第一个工作表  
      const worksheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[worksheetName];

      // 将工作表数据转换为 JSON 对象数组  
      const rawJsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

      // 过滤掉空行  
      const jsonData = rawJsonData.filter(row => {
        // 假设你想要去除那些所有字段都为空、空字符串、null 或 undefined 的行  
        return Object.values(row).some(value => {
          // 检查值是否不是空字符串、null、undefined 等  
          return value !== '' && value !== null && value !== undefined;
        });
      });
      const Jsontable = convertToJsonObjects(jsonData)
      // console.log('--------', Jsontable)
      // 进行数据校验（这里只是示例，你需要根据实际情况进行校验）  
      // ...  
      let col = [
        { title: '序号', dataIndex: 'index', render: (text, record, index) => <span>{index + 1}</span>, },
      ]
      if (Jsontable[0]) {
        Object.keys(Jsontable[0]).forEach(key => {
          // console.log(key, ':', Jsontable[0][key]);  
          col.push({
            title: key,
            dataIndex: key,
            ellipsis: true
          })
        });
      }
      setcolumns(col)

      // console.log('col:',col)
      // 假设校验无误，将数据设置为预览数据  
      setTabledata(Jsontable)
      // setPreviewData(convertToJsonObjects(jsonData));
      setLoading(false);
    };
    reader.readAsArrayBuffer(file);

    // 阻止默认的上传行为，因为我们只是在这里做解析和校验  
    return false;
  };
  // Clear 清 空 数据的逻辑
  const handleClear = () => {
    // 在这里实现导入逻辑  
    // 清除Table数据
    setTabledata([])
    // 清除文件List
    setFileList([]);
    // 清除上传的FileData
    setExceldata(null)
    setFilename('')
    setcolumns([])
  }
  // 触发导入
  const handleUpload = async (file) => {
    // console.log('file',file)
    const formData = new FormData();
    // formData.append('file', file);
    formData.append('file', file);
    // console.log('formData',formData)
    try {
      // console.log('------', formData)
      const response = await UploadExcel(formData);
      console.log('response', response)
      // 处理上传成功的逻辑
      if (response.status === 200) {
        message.success("上传成功！")
        setUploadresult(true)
        setIsModalOpen(true)
      }
      setLoading(false)
      // console.log('File uploaded successfully');
    } catch (error) {
      // 处理上传失败的逻辑
      setLoading(false)
      setUploadresult(false)
      setIsModalOpen(true)
      console.error('Error uploading file:', error)
    }
  };
  // 取消modal
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  // 下载
  const downloadTemplate = async () => {
    console.log(1)
    try {
      console.log(2)
      const response = await DownloadExcel({file:'input'});
      console.log(response)
      console.log(response.status)
      if(response.status === 200){
        return 
      }
      // 触发下载 mi-request对于响应对象可能进行了一些封装或处理，导致直接调用response.blob()方法时出现错误。
      // 相比之下，fetch函数在处理响应对象时更贴近原始的浏览器实现，因此可能会更容易地获取并处理二进制数据。
      // const response = await fetch('/api/download/',{
      //   method: 'GET', // 或其他HTTP方法如POST等
      //   headers: {'Authorization': `Bearer ${window.localStorage.getItem('token')}`},
      // })
      // const blob = await response.blob();
      // const blob = new Blob([response], { type: 'application/octet-stream' })

      // const url = window.URL.createObjectURL(blob);
      // const link = document.createElement('a');
      // link.href = url;
      // link.setAttribute('download', '导出模板.xlsx');
      // document.body.appendChild(link);
      // link.click();
      // document.body.removeChild(link);
      // window.URL.revokeObjectURL(url);
      // message.success("下载成功~");
    } catch (error) {
      message.error("下载失败出~")
      console.log('下载Excel模板时出错：', error);
    }
  };
  // OnChange上传预览
  const UpOnChange = (info) => {
    if (info.file.status === 'uploading') {
      // console.log('---')
      setUploading(true);
      // 使用 info.percent 追踪上传进度  
      setUploadPercent(info.percent);
    }
    if (info.file.status === 'done') {
      setLoading(true);
      setExceldata(info.file.originFileObj)
      setFilename(info.file.name)
      setUploading(false);
      // 文件上传完成后的处理逻辑  
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });

        // 假设我们只处理第一个工作表  
        const worksheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[worksheetName];

        // 将工作表转换为 JSON 对象数组  
        const rawJsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); // 假设第一行是标题行  
        // 过滤掉空行  
        const jsonData = rawJsonData.filter(row => {
          // 假设你想要去除那些所有字段都为空、空字符串、null 或 undefined 的行  
          return Object.values(row).some(value => {
            // 检查值是否不是空字符串、null、undefined 等  
            return value !== '' && value !== null && value !== undefined;
          });
        });
        const Jsontable = convertToJsonObjects(jsonData)
        // console.log('--------', Jsontable)
        // 进行数据校验（这里只是示例，你需要根据实际情况进行校验）  
        // ...  
        let col = [
          { title: '序号', dataIndex: 'index', render: (text, record, index) => <span>{index + 1}</span>, },
        ]
        if (Jsontable[0]) {
          Object.keys(Jsontable[0]).forEach(key => {
            // console.log(key, ':', Jsontable[0][key]);  
            col.push({
              title: key,
              dataIndex: key,
              ellipsis: true
            })
          });
        }
        setcolumns(col)
        // 假设校验无误，将数据设置为预览数据  
        setTabledata(Jsontable)
        setLoading(false);
        message.success('EXCEL文件解析成功,预览 EXCEL - JSON')
      };
      reader.readAsArrayBuffer(info.file.originFileObj);
    } else if (info.file.status === 'error') {
      setUploading(false);
      message.error("文件上传失败")
      // 上传出错的处理逻辑  
    }
  }
  return (
    <PageContainer >
      <Row gutter={16}>
        <Col span={10}>
          <Card title="图片" bordered={false}>
            <Image
              src="/assets/img/001.png"
            />
          </Card>
        </Col>
        <Col span={14}>
          <Card title="轮播" bordered={false}>
            <Carousel autoplay arrows infinite={true} >
              <div>
                <h3 style={contentStyle}>1</h3>
              </div>
              <div>
                <h3 style={contentStyle}>2</h3>
              </div>
              <div>
                <h3 style={contentStyle}>3</h3>
              </div>
              <div>
                <h3 style={contentStyle}>4</h3>
              </div>
            </Carousel>
          </Card>
        </Col>
      </Row>
      <div style={{marginTop:"20px"}}>
        <Upload
          fileList={fileList}
          // beforeUpload={handleBeforeUpload} // 通常用作验证文件
          // showUploadList={false}
          accept='.xlsx,.xls' // 上传的文件类型
          name="file"
          maxCount={1}
          onChange={UpOnChange}
        >
          <Button type="primary" icon={<UploadOutlined />} loading={loading}>
            点击上传 Excel 文件
          </Button>
        </Upload>
        {uploading && <Progress percent={uploadPercent} showInfo={false} />}
        <div>
          {/* style={{ maxHeight: '200px', overflow: 'auto' }} */}

          <Modal title="上传状态~" open={isModalOpen} footer={null} onCancel={handleCancel}>
            {!uploadresult ? <h2 style={{ color: 'red' }}>抱歉主人，数据上传失败了~</h2> : <h2 style={{ color: 'green' }}>恭喜，数据已成功上传~</h2>}
          </Modal>

          <h2 style={{ marginTop: '10px' }}><span style={{ color: 'red' }}>{filename}</span>上传的数据预览：  </h2>
          <Table dataSource={tabledata} columns={columns} />
          <h2>数据数量: {tabledata === null ? 0 : tabledata.length} 条</h2>
          <Button type="primary" danger onClick={handleClear} disabled={loading} icon={<CloseCircleOutlined />}>
            清空数据
          </Button> - - - - - - - - - - -
          <Button type="primary" icon={<CheckCircleOutlined />} loading={loading} onClick={() => {
            // 判断是否有数据
            if (exceldata) {
              setLoading(true)
              handleUpload(exceldata)
            } else {
              message.info('不是，您还没上传数据呢')
            }
          }}>
            确认导入
          </Button> - - - - - - - - - - -
          <Button type="primary" onClick={downloadTemplate}
            icon={<DownloadOutlined />}
            style={{
              backgroundColor: 'darkgreen',
            }}>下载 Excel 模板</Button>
        </div>
      </div>
    </PageContainer>
  );
}

export default ExcelUploader;